import React, { useState } from 'react'
import { Button, Modal, Form, Input, Radio, Upload, message, Select } from 'antd';
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons';
import { url } from '../../services';
import { getAll, getAllTypes } from '../../services/classify';
import { commodityAdd } from '../../services/commodity';

export default function Add({ show }) {
    let [isModalVisible, setIsModalVisible] = useState(false)
    const [form] = Form.useForm();
    let [types, setTypes] = useState([]);
    let showModal = async () => {
        let { data } = await getAllTypes();
        console.log("data", data);
        // setTypes(data.rows)
        setTypes(data);
        setIsModalVisible(true)

    }
    let handleOk = async () => {
        let values = form.getFieldValue()
        console.log(values);
        console.log("values", values.images.fileList.map((item) => item.response.filename));

        setIsModalVisible(false)
        let data = await commodityAdd({ ...values, images: values.images.fileList.map((item) => item.response.filename) })
        console.log("add成功", data);
        show()


    }
    let handleCancel = () => {
        setIsModalVisible(false)
    }
    const [fileList, setFileList] = useState([]);

    const onChange = ({ fileList: newFileList }) => {
        setFileList(newFileList);
    };

    const onPreview = async (file) => {
        let src = file.url;
        if (!src) {
            src = await new Promise((resolve) => {
                const reader = new FileReader();
                reader.readAsDataURL(file.originFileObj);
                reader.onload = () => resolve(reader.result);
            });
        }
        const image = new Image();
        image.src = src;
        const imgWindow = window.open(src);
        imgWindow?.document.write(image.outerHTML);
    };


    const { Option } = Select;
    const children = [];
    for (let i = 0; i < types.length; i++) {
        children.push(<Option key={types[i]._id} value={types[i]._id}>{types[i].sort}</Option>);
    }
    let typesChange = (value) => {
        console.log("value", value);

    }
    return (
        <div>
            <Button type="primary" htmlType="submit"
                onClick={showModal}
            >新增</Button>
            <Modal title="新增" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                <Form
                    form={form}
                    name="basic"
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 15 }}
                    initialValues={{ remember: true }}
                    autoComplete="off"
                >
                    <Form.Item
                        label="商品名"
                        name="name"
                        rules={[{ required: true, message: '不能为空!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="原价"
                        name="oldPrice"
                        rules={[{ required: true, message: '不能为空!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="现价"
                        name="newPrice"
                        rules={[{ required: true, message: '不能为空!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="运费"
                        name="freight"
                        rules={[{ required: true, message: '不能为空!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="商品大小"
                        name="size"
                        rules={[{ required: true, message: '不能为空!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="商品颜色"
                        name="color"
                        rules={[{ required: true, message: '不能为空!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="商品简介"
                        name="intro"
                        rules={[{ required: true, message: '不能为空!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="库存"
                        name="stock"
                        rules={[{ required: true, message: '不能为空!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="适用人群"
                        name="fit"
                        rules={[{ required: true, message: '不能为空!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="品牌"
                        name="brand"
                        rules={[{ required: true, message: '不能为空!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="类型"
                        name="types"
                        rules={[{ required: true, message: '不能为空!' }]}
                    >
                        <Select
                            defaultValue="请选择"
                            onChange={typesChange}
                            style={{
                                width: 200,
                            }}
                        >
                            {children}
                        </Select>
                    </Form.Item>
                    <Form.Item
                        label="商品图片"
                        name="images"
                        rules={[{ required: true, message: '不能为空!' }]}
                    >
                        <Upload
                            name="file"
                            action={url + "/upload"}
                            listType="picture-card"
                            fileList={fileList}
                            onChange={onChange}
                            onPreview={onPreview}
                        >
                            {fileList.length < 5 && '+ Upload'}
                        </Upload>

                    </Form.Item>
                </Form>
            </Modal>

        </div>
    )
}
